<template>
  <div class="wq">
    <el-carousel indicator-position="outside">
      <el-carousel-item v-for="item in 4" :key="item">
        <h3>{{ item }}</h3>
      </el-carousel-item>
    </el-carousel>
      <video
        muted
        autoplay
        loop
        class="sp"
        controls
        src="../video/福特Mustang 火力橙限量版.m3u8.mp4"
      ></video>
  
    <div class="shi">
      <span style="text-align: center; font-size: 50px; color: orange"
        >街道就是你的主场</span
      >
      <el-divider></el-divider>
      <span style="text-align: center; font-size: 20px; color: orange"
        >青春是一个短暂的美梦, 当你醒来时, 它早已消失无踪</span
      >
      <el-divider></el-divider>
      <div id="main" style="width: 500px;    height: 292px;; background: #fff; top: 50px"></div>
    </div>
  </div>
</template>


<style lang="less" scoped >
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-image: url(../assets/灵感.png);
  background-size: cover;
  /* background-repeat:no-repeat; */
}

.el-carousel__item:nth-child(2n + 1) {
  background-image: url(../assets/灵感3.png);
  background-size: contain;
}
.sp {
  position: absolute;
  left: 0%;
  width: 900px;
  height: 532px;
  -o-object-fit: fill;
  object-fit: fill;
  top: 335px;
}
.el-carousel--horizontal {
  position: absolute;
  width: 100%;
  height: 334px;
  overflow-x: hidden;
}
.wq {
  height: 1px;
  /* padding: 0px 0 0px 344px;*/
  width: 1650px;
}
.shi {
  background-color: #ff7d7d3b;
  width: 500px;
  height: 500px;
  position: absolute;
  right: 10%;
  top: 335px;
}
.chart {
  height: 400px;
}
</style>

<script>
import * as echarts from 'echarts';
export default {
  data() {
    return {
      drawer: false,
      charts: "",
      opinionData: [
        "155",
        "400",
        "900",
        "800",
        "300",
        "900",
        "270",
        "500",
        "800",
      ], //数据
    };
  },
  methods: {
    drawLine(id) {
      this.charts = echarts.init(document.getElementById(id));
      this.charts.setOption({
        title: {
          left: "3%",
          top: "5%",
          text: "最近一周订单数量", //标题文本，支持使用 \n 换行。
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          align: "right", //文字在前图标在后
          left: "3%",
          top: "15%",
          data: ["近一周"],
          data1: ["近一个月"],
        },
        grid: {
          top: "30%",
          left: "5%",
          right: "5%",
          bottom: "5%",
          containLabel: true,
        },

        toolbox: {
          feature: {
            saveAsImage: {}, //保存为图片
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: true,
          axisTick: {
            alignWithLabel: true, //保证刻度线和标签对齐
          },
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"], //x坐标的名称
        },
        yAxis: {
          type: "value",
          boundaryGap: true,
          splitNumber: 4, //纵坐标数
          interval: 250, //强制设置坐标轴分割间隔
        },

        series: [
          {
            name: "近一周",
            type: "line", //折线图line;柱形图bar;饼图pie
            stack: "总量",
            areaStyle: {
              //显示区域颜色---渐变效果
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgb(255,200,213)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#ffffff", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
            itemStyle: {
              color: "rgb(255,96,64)", //改变折线点的颜色
              lineStyle: {
                color: "rgb(255,96,64)", //改变折线颜色
              },
            },
            data: this.opinionData,
            data1: this.opinionData1,
          },
        ],
      });
    },
  },

  // updated: function () {
  //     this.drawCharts()
  // }

  //调用
  mounted() {
    this.$nextTick(function () {
      this.drawLine("main");
    });
  },
};
</script>